import React, { useState } from 'react';
import pub from '@/css/Tom/pub.less';
import style from '@/css/Tom/WithDrawal.less';
import { Breadcrumb, Input, Table } from 'antd';

const columns = [
  {
    title: '门店名称',
    dataIndex: 'store_name',
    key: 'store_name',
  },
  {
    title: '金额',
    dataIndex: 'price',
    key: 'price',
  },
  {
    title: '提现类型',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: '收款人姓名',
    dataIndex: 'money_name',
    key: 'money_name',
  },
  {
    title: '提现账号',
    dataIndex: 'withdrawal_num',
    key: 'withdrawal_num',
  },
  {
    title: '提现时间',
    dataIndex: 'withdrawal_time',
    key: 'withdrawal_time',
  },
  {
    title: '状态',
    dataIndex: 'state',
    key: 'state',
    render(text: any, row: any, index: any) {
      console.log(text, row);
      switch (text) {
        case 1:
          return (
            <div
              style={{ width: '5em', color: '#FF822F', textAlign: 'center' }}
            >
              提现中
            </div>
          );
          break;
        case 2:
          return (
            <div
              style={{ width: '5em', color: '#51A7FF', textAlign: 'center' }}
            >
              已提现
            </div>
          );
          break;
        case 3:
          return (
            <div style={{ width: '5em', color: 'white', textAlign: 'center' }}>
              已取消
            </div>
          );
          break;
        case 4:
          return (
            <div style={{ width: '5em', color: 'white', textAlign: 'center' }}>
              已关闭
            </div>
          );
          break;
      }
    },
  },
];

const data = [
  {
    key: '1',
    store_name: '幸福小店',
    money_name: '王柏川',
    price: 234.01,
    type: '微信',
    withdrawal_num: '17635032032',
    withdrawal_time: '2021-12-01 13:01',
    state: 2,
  },
  {
    key: '2',
    store_name: '幸福老店',
    money_name: '郑可馨',
    price: 234.01,
    type: '微信',
    withdrawal_num: '17635032032',
    withdrawal_time: '2021-12-01 13:01',
    state: 1,
  },
];

function WithDrawal(props: any) {
  const { name, path } = props.route;
  const [values, set_value] = useState('');
  const rot = [
    { name: '首页', path: '/' },
    { name: '门店', path: '/storeAllStore' },
    { name: name, path: path },
  ];

  function value(e: any) {
    set_value(e.target.value);
  }

  function submit() {
    console.log('要提交的数据是', values);
  }

  return (
    <div>
      <Breadcrumb>
        {rot.map((e) => (
          <Breadcrumb.Item key={e.name}>
            <a href={e.path}>{e.name}</a>
          </Breadcrumb.Item>
        ))}
      </Breadcrumb>
      <div className={pub.put_top}>{name}x</div>
      <div className={style.box}>
        <div className="site-input-group-wrapper">
          <Input.Group compact>
            <Input.Search
              onPressEnter={submit}
              placeholder="请输入名称"
              allowClear
              onChange={value}
              style={{ width: '20%' }}
            />
          </Input.Group>
          <br />
        </div>
        <Table columns={columns} dataSource={data} />
      </div>
    </div>
  );
}

export default WithDrawal;
